<template>
    <div>
    <van-sticky>
        <van-nav-bar
            :title="TypeName"
            placeholder
            z-index="1000"
            left-text="返回"
            left-arrow
            @click-left="onBack"
            @click-right="SearchShow = true"
        >
            <template #right>
                <van-icon name="search" size="20" />
            </template>
    </van-nav-bar>
    </van-sticky>
    <!-- 搜索框 -->
    <van-popup v-model:show="SearchShow" position="top">
        <van-search v-model="keywords" placeholder="请输入关键词" @search="onSearch" />
    </van-popup>


    <van-sticky :offset-top="46">
        <van-dropdown-menu>
            <van-dropdown-item @change="TypeToggle" v-model="TypeActive" :options="TypeList" />
            <van-dropdown-item @change="FlagToggle" v-model="FlagActive" :options="FlagList" />
            <van-dropdown-item @change="SortToggle" v-model="SortActive" :options="SortList" />
            <van-dropdown-item @change="ByToggle" v-model="ByActive" :options="ByList" />
        </van-dropdown-menu>
    </van-sticky>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 加载列表 -->
    <van-list 
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了" @load="onLoad">
            <ul class="proul">
              
            <!-- 使用瀑布流布局 -->
            <div class="masonry">
                <div class="item" v-for="item in list" :key="item.id">
                    <router-link :to="{ path: '/product/info', query: { proid: item.id } }">

                        <van-image width="100%" height="auto" fit="cover" :src="item.thumbs_cdn" />
                    <div style="display: flex;    justify-content: space-between;">
                        <router-link :to="{path:'/product/info',query:{proid:item.id}}">
                            <span class="tit">{{ item.name }}</span>
                        </router-link>

                        <router-link :to="{path:'/share/add',query:{proid:item.id}}">
                            <span class="tit" ><van-icon name="share-o" size="25" style="margin-right: 10px;"/></span>
                        </router-link>
                    </div>
                        <div class="price">
                            <p>￥{{ item.price }} / {{ item.unit.name }}</p>
                        </div>
                        
                    </router-link>
                </div>
            </div>

                <!-- 返回顶部 -->
                <van-back-top />
            </ul>
        </van-list>
    </van-pull-refresh>
</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const SearchShow = ref(false);

const TypeList = reactive([
    {text: '全部分类', value: '0'},
]);

const FlagList = reactive([
    {text: '全部商品', value: '0'},
    {text: '新品', value: '1'},
    {text: '热销', value: '2'},
    {text: '推荐', value: '3'},
]);

const SortList = reactive([
    {text: '按上架时间', value: 'createtime'},
    {text: '按价格', value: 'price'},
    {text: '按库存', value: 'stock'}
]);

const ByList = reactive([
    {text: '降序', value: 'desc'},
    {text: '升序', value: 'asc'},
]);


const TypeActive = ref(proxy.$route.typeid ?? '0')
const FlagActive = ref('0')  //标志 1-新品 2-热销 3-推荐
const SortActive = ref('createtime') //排序 上架时间 价格 库存
const ByActive = ref('desc')  //desc 降序 asc 升序
const TypeName = ref('全部分类') //标题栏上面的分类名称

const keywords = ref('');

const refreshing = ref(false);
const finished = ref(false);
const loading = ref(false);
const list = ref([]);
const page = ref(1);

onBeforeMount(() => {
    getTypeData();
})

const onRefresh = () =>
{
    list.value = [];
    page.value = 1;
    loading.value = true;
    finished.value = false;
    refreshing.value = true;

    setTimeout(onLoad,1500);
}

const onLoad = async () =>
{
    if(refreshing.value)
    {
        refreshing.value = false;
    }
    let params = {
        typeid:TypeActive.value,
        keywords:keywords.value,
        page:page.value,
        flag:FlagActive.value,
        sort:SortActive.value,
        by:ByActive.value
    }

    let result = await proxy.$http.post({
        url:'/product/index',
        params
    })

    finished.value = false;
    loading.value = false;

    if(result.code === 1)
    {
        list.value = list.value.concat(result.data.list);
        let count = result.data.count ?? 0;

        if(list.value.length >= count)
        {
            finished.value = true;
            return false;
        }

        page.value = page.value + 1;
    }else{
        finished.value = true;
        proxy.$warning(result.msg);
    }
}

const onSearch = () =>
{
    SearchShow.value = false;

    onRefresh();
}

const TypeToggle = (value) =>
{
    for(let item of TypeList)
    {
        if(item.id == value)
        {
            TypeName.value = item.name;
            break;
        }
    }

    onRefresh();
}

const FlagToggle = () =>
{
    onRefresh();
}

const SortToggle = () =>
{
    onRefresh();
}

const ByToggle = () =>
{
    onRefresh();
}

const getTypeData = async () =>
{
    let result = await proxy.$http.post({
        url:'/product/type'
    });

    if(result.code === 1)
    {
        for(let item of result.data)
        {
            TypeList.push({
                text:item.name,
                value:item.id
            })
        }
    }
}

const onBack = () => proxy.$router.back();
</script>


<style scoped>

@import url('/assets/css/ProductIndex.css');
/* 瀑布流样式 */
.masonry {
    width: 96vw;
    margin: 20px auto;
    columns: 2;
    column-gap: 20px;
}

.item {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 2px 8px hsla(0, 0%, 62.7%, 0.5);
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}

.item .tit {
    display: block;
    font-size: 15px;
    color: #333;
    padding: 8px 0;
    /* margin-bottom: 10px; */
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item img,
.item p {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.item p {
    color: #fe7923;
    font-size: 16px;
}

.item :deep(img) {
  max-height: 200px;
  object-fit: cover;
}

</style>